<template>
    <div class="bg">
       <topNav txt="成为VIP" :mode="2" ></topNav>
       <div class="tip">选择你要开通的VIP套餐</div>
       <div class="main">
               <van-radio-group v-model="radio">
                <van-radio name="1"><span>¥3000</span> <span>一年</span></van-radio>
                <van-radio name="2"><span>¥2680</span> <span>二年</span></van-radio>
                 <van-radio name="3"><span>¥2380</span> <span>三年</span></van-radio>
                <van-radio name="4"><span>¥1800</span> <span>五年</span></van-radio>
                </van-radio-group>
       </div>
       <div class="explain_box">
           <div class="explain_list height_60">
               <img src="../../../static/images/me/vipkey.png" alt="" class="vip_icon">
               <span>VIP特权介绍</span>
           </div>
           <div class="explain_list border_top ">
               <div class="dot"></div>
               <span class="explain_des">VIP可以查看总回访功能</span>
           </div>
           <div class="explain_list border_top">
               <div class="dot"></div>
               <span class="explain_des">VIP可以查看客户基盘客户资料且打包发送功能</span>
           </div>
           
       </div>
       <div class="code_box">
               <img src="../../../static/images/me/input.png" alt="">
               <span>优惠编码</span>
               <input type="text" placeholder="输入任意4位数">
           </div>
           <div class="pay_box">
               <img src="../../../static/images/me/wx_icon.png" alt="">
<span>微信支付</span>
           </div>
    </div>
</template>
<script>
import topNav from "@/components/return"
export default {
  components: {
    topNav
  }, 
  data(){
      return{
          radio:''
      }
  },
  created(){
       
  }
}
</script>
<style  scoped>
.bg{
  width: 100vw;
    min-height: 100vh;
    background: #EDEDED;
}
.tip{
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background: #fff;
}
.main{
    border-top: 5px solid #EDEDED;
    border-bottom: 5px solid #EDEDED;
 padding-left: 20px;
  background: #fff;
}
.list{
    display: flex;
    align-items: center;
    height: 50px;
}
.van-radio{
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #EDEDED;
}
.van-radio span{
    padding: 0 20px;
}
.explain_box{
background: #fff;
padding: 0 20px;
}
.explain_list{
    display: flex;
    align-items: center;
}
.vip_icon{
    width: 30px;
    height: 30px;
}
.height_60{
    height: 50px;
}
.dot{
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #000;
    margin: 10px;
}
.explain_des{
    font-size: 12px;
}
.border_top{
    height: 30px;
    border-top: 1px solid #EDEDED;
}
.code_box{
    display: flex;
    align-items: center;
    background: #fff;
    height: 50px;
    border-top: 5px solid #EDEDED;
    border-bottom: 5px solid #EDEDED;
    
}
.code_box img{
    width: 30px;
    height: 30px;
    margin:0 10px 0 20px;

}
.code_box input{
    margin-left: 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
    padding: 0 10px;
    border: 1px solid  #797979;
    background:#EDEDED;
      
}
.pay_box{
    display: flex;
    align-items: center;
    height: 50px;
    background: #fff;
    margin: 20px;
    /* padding: 10px; */
}
.pay_box img{
    width: 40px;
    height: 40px;
    margin: 0 30px 0 60px;
}
</style>